<!--
 * @FilePath: CommonHeader.vue
 * @Author: 杜芬
 * @Date: 2025-04-22 15:42:40
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-04-22 16:32:11
 * Copyright: 2025 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 页面
-->
<template>
  <div class="header"
  >
  <!-- left 折叠图标 -->
  <div class="left">
    <el-icon class="Expand" v-if="isCollapse" @click="isCollapse = !isCollapse" ><Expand /></el-icon>
    <el-icon class="Expand" v-else @click="isCollapse = !isCollapse"><Fold /></el-icon>
  </div>
  <!-- right 用户信息 -->
  <div class="right">
    <el-dropdown>
    <span class="el-dropdown-link">
      <img src="~@/assets/img/tou-xiang.png" alt="用户头像" srcset="">
      用户信息
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="out">退出</el-dropdown-item>
        <el-dropdown-item @click="userInfo">用户信息</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  </div>
    
  </div>
</template>
<script setup>
import {ref} from "vue"
const isCollapse = ref(false)
// 退出
const out =() => {
  console.log("退出")
}
// 点击跳转到用户信息页面
const userInfo =() => {
  console.log("点击跳转到用户信息页面")
}

</script>
<style lang="less">
.header {
  width:100%;
  height: 60px;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}
img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 10px

}
.right {
  margin-top: 10px;
}
.Expand {
  font-size: 30px;
  margin-right: 10px;
}
.left {
  margin-top: 10px;
}
</style>